<template>
  <el-popover placement="bottom-end" width="390" trigger="click">
    <el-tabs stretch v-model="activeName" @tab-click="handleClick" class="notice_tab">
      <el-tab-pane label="运营通知 (5)" name="first" class="notice">
        <a href="#">
          <p>显示运营消息内容，超出部分自动截断</p>
          <p class="date">2018年10月29日</p>
        </a>
        <a href="#">
          <p>默认显示最新的五条未读运营记录</p>
          <p class="date">2018年10月29日</p>
        </a>
        <a href="#">
          <p>显示运营消息内容，超出部分自动截断</p>
          <p class="date">2018年10月29日</p>
        </a>
        <a href="#">
          <p>默认显示最新的五条未读运营记录</p>
          <p class="date">2018年10月29日</p>
        </a>
        <a href="#">
          <p>显示运营消息内容，超出部分自动截断</p>
          <p class="date">2018年10月29日</p>
        </a>
      </el-tab-pane>
      <el-tab-pane label="买家私信 (3)" name="second" class="notice">
        <a href="#">
          <p>显示运营消息内容，超出部分自动截断</p>
          <p class="date">2018年10月29日</p>
        </a>
        <a href="#">
          <p>显示运营消息内容，超出部分自动截断</p>
          <p class="date">2018年10月29日</p>
        </a>
        <a href="#">
          <p>显示运营消息内容，超出部分自动截断</p>
          <p class="date">2018年10月29日</p>
        </a>
      </el-tab-pane>
      <el-tab-pane label="技术支持 (4)" name="third" class="notice">
        <a href="#">
          <p>虚拟账户的定义</p>
          <p class="date">2018年10月29日</p>
        </a>
        <a href="#">
          <p>运营商系统相关操作指导</p>
          <p class="date">2018年10月29日</p>
        </a>
        <a href="#">
          <p>供应商产品相关操作指导</p>
          <p class="date">2018年10月29日</p>
        </a>
        <a href="#">
          <p>营销活动介绍</p>
          <p class="date">2018年10月29日</p>
        </a>
      </el-tab-pane>
    </el-tabs>

    <div slot="reference" class="dropdown-title">
      <el-badge :value="12" :max="99" class="item">
        <svg-icon class-name="messageInteract-icon" icon-class="messageInteract" />
      </el-badge>
    </div>
  </el-popover>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dropdown-title {
    padding: 0 15px;
    font-size: 0;
    cursor: pointer;
    transition: all 0.3s;
    &:hover { background-color: #f9f9f9; }
    .messageInteract-icon {
      font-size: 15px;
      fill: rgba(0, 0, 0, 0.8);
      cursor: pointer;
      vertical-align: middle;
    }
  }
  .notice {
    a {
      display: block;
      padding: 15px 24px;
      color: #000;
      border-bottom: 1px solid #ebeef5;
      transition: all 0.3s;
      &:hover { background-color: #fcfcfc; }
      p {
        margin: 0 0 10px 0;
        color: rgba(0, 0, 0, 0.75);;
      }
      p.date {
        margin-bottom: 0;
        color: rgba(0, 0, 0, 0.45);
      }
    }
  }
</style>
<style rel="stylesheet/scss" lang="scss">
  .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #ebeef5;
  }
  .notice_tab{
    .el-tabs__header {
      margin-bottom: 4px;
      .el-tabs__nav-scroll {
        padding: 0 24px;
        .el-tabs__active-bar{
          background-color: #1890ff;
        }
        .el-tabs__item {
          height: 47px;
          line-height: 47px;
          color: #606266;
          &:hover, &.is-active {
            color: #1890ff;
          }
        }
      }
    }
  }
</style>
